<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的书架</title>
    <!-- 图标组件库 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3701801_12u2357o4ba.css">
    <link rel="stylesheet" th:href="@{/css/sidebar.css}">
    <link rel="stylesheet" th:href="@{/css/topBar.css}">
    <link rel="stylesheet" th:href="@{/css/emptyMyBook.css}">
</head>
<body>




<nav class="sidebar close">
    <header>
        <div class="user-info">
                <span class="image">
                    <img th:src="@{/img/tx.JPG}" alt="">
                </span>
            <div class="text nickname">
                <span class="name">[[${session.name}]]</span>
                <span class="identity" th:text="${session.identity}">普通用户</span>
            </div>
        </div>

        <i class="toggle iconfont icon-xiangyou1"></i>
    </header>

    <div class="menu-bar">
        <div class="menu">
            <li class="search-box">
                <i class="iconfont icon-sousuo icon"></i>
                <input type="text" placeholder="搜你想要">
            </li>
            <ul class="menu-links">
                <li class="nav-link">
                    <a th:href="@{/}">
                        <i class="iconfont icon-home icon"></i>
                        <span class="text nav-text">回到主页</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a th:href="@{/user/self}">
                        <i class="iconfont icon-yonghuguanli icon"></i>
                        <span class="text nav-text">个人信息</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a th:href="@{/user/myBook}">
                        <i class="icon iconfont icon-tubiaozhizuomoban-37"></i>
                        <span class="text nav-text">我的书架</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a th:href="@{/user/problem}">
                        <i class="icon iconfont icon-guizeguanli"></i>
                        <span class="text nav-text">问题反馈</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a href="#">
                        <i class=" icon iconfont icon-aixin1"></i>
                        <span class="text nav-text">特别关心</span>
                    </a>
                </li>
                <li class="nav-link">
                    <a  th:href="@{/music}">
                        <i class="icon iconfont icon-yinle"></i>
                        <span class="text nav-text">音乐</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="bottom-content">
            <li>
                <a th:href="@{/logout}">
                    <i class="icon iconfont icon-tuichu"></i>
                    <span class="text nav-text">退出登录</span>
                </a>
            </li>
            <li class="mode">
                <div class="sun-moon">
                    <i class="icon iconfont icon-a-icon_wananyueliangshuimian moon"></i>
                    <i class="icon iconfont icon-taiyang-copy sun"></i>
                </div>
                <span class="mode-text text">夜间模式</span>
                <div class="toggle-switch">
                    <span class="switch"></span>
                </div>
            </li>
        </div>
    </div>
</nav>

<section class="home">
    <!-- 顶部导航条 -->
    <!-- 顶部导航条外层容器 -->
    <div class="topbar-wrapper ">
        <div class="topbar">

            <ul class="left-nav">
                <li ><a href="#" class="acolor">三味书城</a></li>
                <li class="team-wrapper">
                    <a href="#"   class="acolor">
                        团队信息
                        <div class="team">
                            <div class="cube">
                                <!-- 引入图片 -->
                                <div class="box1">
                                    <img th:src="@{/img/team/lxg.jpg}">
                                </div>

                                <div class="box2">
                                    <img th:src="@{/img/team/lx.jpg}">
                                </div>

                                <div class="box3">
                                    <img th:src="@{/img/team/xsn.jpg}">
                                </div>

                                <div class="box4">
                                    <img th:src="@{/img/team/yzz.jpg}">
                                </div>

                                <div class="box5">
                                    <img th:src="@{/img/team/zj.jpg}">
                                </div>

                                <div class="box6">
                                    <img th:src="@{/img/team/zk.jpg}">
                                </div>
                            </div>
                            <!-- 团队简介 -->
                            <div class="team-info">
                                <div class="outer">
                                    <!-- 创建图片容器 -->
                                    <div class="img-wrapper">
                                        <img th:src="@{/img/team/lxg.jpg}" alt="">
                                    </div>
                                    <!-- 创建内容区容器 -->
                                    <div class="info">
                                        <h2 class="title">
                                            林徐耿
                                        </h2>
                                        <h3 class="category">
                                            <i class="iconfont icon-renyuanjieshao"></i>
                                            简介
                                        </h3>
                                        <p class="intro">
                                            20软件工程二班
                                        </p>
                                    </div>
                                </div>
                                <div class="outer">
                                    <!-- 创建图片容器 -->
                                    <div class="img-wrapper">
                                        <img th:src="@{/img/team/yzz.jpg}" alt="">
                                    </div>
                                    <!-- 创建内容区容器 -->
                                    <div class="info">
                                        <h2 class="title">
                                            余子中
                                        </h2>
                                        <h3 class="category">
                                            <i class="iconfont icon-renyuanjieshao"></i>
                                            简介
                                        </h3>
                                        <p class="intro">
                                            20软件工程二班
                                        </p>
                                    </div>
                                </div>
                                <div class="outer">
                                    <!-- 创建图片容器 -->
                                    <div class="img-wrapper">
                                        <img th:src="@{/img/team/xsn.jpg}" alt="">
                                    </div>
                                    <!-- 创建内容区容器 -->
                                    <div class="info">
                                        <h2 class="title">
                                            薛思暖
                                        </h2>
                                        <h3 class="category">
                                            <i class="iconfont icon-renyuanjieshao"></i>
                                            简介
                                        </h3>
                                        <p class="intro">
                                            20软件工程二班
                                        </p>
                                    </div>
                                </div>
                                <div class="outer">
                                    <!-- 创建图片容器 -->
                                    <div class="img-wrapper">
                                        <img th:src="@{/img/team/lx.jpg}" alt="">
                                    </div>
                                    <!-- 创建内容区容器 -->
                                    <div class="info">
                                        <h2 class="title">
                                            刘翔
                                        </h2>
                                        <h3 class="category">
                                            <i class="iconfont icon-renyuanjieshao"></i>
                                            简介
                                        </h3>
                                        <p class="intro">
                                            20软件工程二班
                                        </p>
                                    </div>
                                </div>
                                <div class="outer">
                                    <!-- 创建图片容器 -->
                                    <div class="img-wrapper">
                                        <img th:src="@{/img/team/zk.jpg}" alt="">
                                    </div>
                                    <!-- 创建内容区容器 -->
                                    <div class="info">
                                        <h2 class="title">
                                            钟楷
                                        </h2>
                                        <h3 class="category">
                                            <i class="iconfont icon-renyuanjieshao"></i>
                                            简介
                                        </h3>
                                        <p class="intro">
                                            20软件工程二班
                                        </p>
                                    </div>
                                </div>
                                <div class="outer">
                                    <!-- 创建图片容器 -->
                                    <div class="img-wrapper">
                                        <img th:src="@{/img/team/zj.jpg}" alt="">
                                    </div>
                                    <!-- 创建内容区容器 -->
                                    <div class="info">
                                        <h2 class="title">
                                            张楗
                                        </h2>
                                        <h3 class="category">
                                            <i class="iconfont icon-renyuanjieshao"></i>
                                            简介
                                        </h3>
                                        <p class="intro">
                                            20软件工程二班
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li><a href="#"   class="acolor">操作规则</a></li>
                <li>
                    <a class="app acolor" href="#">联系客服
                        <!-- 添加一个弹出层 -->
                        <div class="qrcode">
                            <img th:src="@{/img/kefu.jpg}" alt="">
                            <span>添加微信</span>
                        </div>
                    </a>
                </li>
                <li><a th:href="@{/user/self}"   class="acolor">个人中心</a></li>
            </ul>

            <div class="right-nav">



                <!--如果未登录显示-->

                <ul class="login-nav" th:if="${session.user}==null">
                    <li><a th:href="@{/login}" class="acolor">登录</a></li>
                    <li><a th:href="@{/regist}" class="acolor">注册</a></li>
                </ul>

                <!--如果已经登录显示欢迎信息-->
                <ul class="login-nav" th:if="${session.user}!=null">
                    <li>欢迎使用</li>
                </ul>

                <ul class="bookshelf">
                    <li>
                        <a class="cart acolor" href="javascript:;">
                            <i class="iconfont icon-bookshelf"></i>
                            书架([[${session.myBooksSize}]])
                            <!-- 添加一个弹出层如果没书显示这个 -->
                            <div class="cart-msg" th:if="${session.isEmpty}">
                                <span>书架中还没有书籍,请慢慢挑选吧！</span>
                            </div>
                            <!-- 如果有书，显示以下 -->
                            <!-- 部分书籍显示，以及一个进入书架的链接 -->
                            <div class="cart-msg2" th:if="${session.noEmpty}">
                                <a th:href="@{/user/myBook}">点击前往书架！</a>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>




        </div>
    </div>


    <div class="mybooks">
        <h2 id="myBookMsg" th:userMsg="${noUser}">书架信息</h2>
        <div class="mybookList">
            <h1 th:if="${isEmpty}">您的书架还没有任何图书噢！</h1>
            <h1 th:if="${noUser}">您还未登录！</h1>
            <a th:if="${noUser}" th:href="@{/login}">点击前往登录页！</a>
        </div>
    </div>




</section>

<script th:src="@{/script/script.js}"></script>


</body>
</html>